<div class="container">
  <h1 class="d-none d-sm-block h3 mb-3 text-center" i18n>Analysis</h1>
  @if (user?.settings?.isExperimentalFeatures) {
    <div class="mb-3 row">
      <div class="col-lg">
        <div class="d-flex justify-content-end">
          <button
            #actionsMenuButton
            class="mx-1 no-min-width px-2"
            mat-stroked-button
            [matMenuTriggerFor]="actionsMenu"
            (click)="$event.stopPropagation()"
          >
            <ion-icon name="ellipsis-vertical" />
          </button>
          <mat-menu
            #actionsMenu="matMenu"
            class="no-max-width"
            xPosition="before"
          >
            <div (click)="$event.stopPropagation()">
              <button
                mat-menu-item
                [disabled]="!hasPermissionToReadAiPrompt"
                (click)="onCopyPromptToClipboard('portfolio')"
              >
                <span class="align-items-center d-flex">
                  @if (user?.subscription?.type === 'Basic') {
                    <gf-premium-indicator class="mr-2" />
                  } @else {
                    @if (isLoadingPortfolioPrompt) {
                      <mat-spinner
                        class="mr-2"
                        color="accent"
                        [diameter]="16"
                      />
                    } @else {
                      <ion-icon class="mr-2" name="copy-outline" />
                    }
                  }
                  <ng-container i18n
                    >Copy portfolio data to clipboard for AI
                    prompt</ng-container
                  >
                </span>
              </button>
              <button
                mat-menu-item
                [disabled]="!hasPermissionToReadAiPrompt"
                (click)="onCopyPromptToClipboard('analysis')"
              >
                <span class="align-items-center d-flex">
                  @if (user?.subscription?.type === 'Basic') {
                    <gf-premium-indicator class="mr-2" />
                  } @else {
                    @if (isLoadingAnalysisPrompt) {
                      <mat-spinner
                        class="mr-2"
                        color="accent"
                        [diameter]="16"
                      />
                    } @else {
                      <ion-icon class="mr-2" name="copy-outline" />
                    }
                  }
                  <ng-container i18n
                    >Copy AI prompt to clipboard for analysis</ng-container
                  >
                </span>
              </button>
            </div>
          </mat-menu>
        </div>
      </div>
    </div>
  }
  <div class="mb-5 row">
    <div class="col-lg">
      <gf-benchmark-comparator
        class="h-100"
        [benchmark]="benchmark"
        [benchmarkDataItems]="benchmarkDataItems"
        [benchmarks]="benchmarks"
        [colorScheme]="user?.settings?.colorScheme"
        [isLoading]="isLoadingBenchmarkComparator || isLoadingInvestmentChart"
        [locale]="user?.settings?.locale"
        [performanceDataItems]="performanceDataItemsInPercentage"
        [user]="user"
        (benchmarkChanged)="onChangeBenchmark($event)"
      />
    </div>
  </div>

  <div class="mb-5 row">
    <div class="col">
      <mat-card appearance="outlined">
        <mat-card-content>
          <div class="d-flex py-1">
            <div
              class="align-items-center d-flex flex-grow-1 mr-2 text-truncate"
            >
              <span i18n>Absolute Asset Performance</span>
              @if (user?.subscription?.type === 'Basic') {
                <gf-premium-indicator class="ml-1" />
              }
            </div>
            <div class="d-flex justify-content-end">
              <gf-value
                class="justify-content-end"
                position="end"
                [isCurrency]="true"
                [locale]="user?.settings?.locale"
                [unit]="user?.settings?.baseCurrency"
                [value]="
                  isLoadingInvestmentChart
                    ? undefined
                    : performance?.netPerformance
                "
              />
            </div>
          </div>
          <div class="d-flex mb-3 ml-3 py-1">
            <div class="flex-grow-1 mr-2 text-truncate" i18n>
              Asset Performance
            </div>
            <div class="d-flex justify-content-end">
              <gf-value
                class="justify-content-end"
                position="end"
                [colorizeSign]="true"
                [isPercent]="true"
                [locale]="user?.settings?.locale"
                [value]="
                  isLoadingInvestmentChart
                    ? undefined
                    : performance?.netPerformancePercentage
                "
              />
            </div>
          </div>
          <div class="d-flex py-1">
            <div
              class="align-items-center d-flex flex-grow-1 mr-2 text-truncate"
            >
              <span i18n>Absolute Currency Performance</span>
              @if (user?.subscription?.type === 'Basic') {
                <gf-premium-indicator class="ml-1" />
              }
            </div>
            <div class="d-flex justify-content-end">
              <gf-value
                class="justify-content-end"
                position="end"
                [isCurrency]="true"
                [locale]="user?.settings?.locale"
                [unit]="user?.settings?.baseCurrency"
                [value]="
                  isLoadingInvestmentChart
                    ? undefined
                    : performance?.netPerformance === null
                      ? null
                      : performance?.netPerformanceWithCurrencyEffect -
                        performance?.netPerformance
                "
              />
            </div>
          </div>
          <div class="d-flex ml-3 py-1">
            <div class="flex-grow-1 mr-2 text-truncate" i18n>
              Currency Performance
            </div>
            <div class="d-flex justify-content-end">
              <gf-value
                class="justify-content-end"
                position="end"
                [colorizeSign]="true"
                [isPercent]="true"
                [locale]="user?.settings?.locale"
                [value]="
                  isLoadingInvestmentChart
                    ? undefined
                    : performance?.netPerformancePercentage === null
                      ? null
                      : performance?.netPerformancePercentageWithCurrencyEffect -
                        performance?.netPerformancePercentage
                "
              />
            </div>
          </div>
          <div><hr /></div>
          <div class="d-flex py-1">
            <div class="flex-grow-1 mr-2 text-truncate" i18n>
              Absolute Net Performance
            </div>
            <div class="d-flex justify-content-end">
              <gf-value
                class="justify-content-end"
                position="end"
                [isCurrency]="true"
                [locale]="user?.settings?.locale"
                [unit]="user?.settings?.baseCurrency"
                [value]="
                  isLoadingInvestmentChart
                    ? undefined
                    : performance?.netPerformanceWithCurrencyEffect
                "
              />
            </div>
          </div>
          <div class="d-flex ml-3 py-1">
            <div class="flex-grow-1 mr-2 text-truncate" i18n>
              Net Performance
            </div>
            <div class="d-flex justify-content-end">
              <gf-value
                class="justify-content-end"
                position="end"
                [colorizeSign]="true"
                [isPercent]="true"
                [locale]="user?.settings?.locale"
                [value]="
                  isLoadingInvestmentChart
                    ? undefined
                    : performance?.netPerformancePercentageWithCurrencyEffect
                "
              />
            </div>
          </div>
        </mat-card-content>
      </mat-card>
    </div>
  </div>

  <div class="mb-5 row">
    <div class="col-md-6 mb-3">
      <mat-card appearance="outlined" class="h-100">
        <mat-card-header>
          <mat-card-title class="align-items-center d-flex" i18n
            >Top</mat-card-title
          >
        </mat-card-header>
        <mat-card-content>
          <ol class="mb-0 ml-1 pl-3">
            @for (holding of top3; track holding) {
              <li class="py-1">
                <a
                  class="d-flex"
                  [queryParams]="{
                    dataSource: holding.dataSource,
                    holdingDetailDialog: true,
                    symbol: holding.symbol
                  }"
                  [routerLink]="[]"
                >
                  <div class="flex-grow-1 mr-2">{{ holding.name }}</div>
                  <div class="d-flex justify-content-end">
                    <gf-value
                      class="justify-content-end"
                      position="end"
                      [colorizeSign]="true"
                      [isPercent]="true"
                      [locale]="user?.settings?.locale"
                      [value]="holding.netPerformancePercentWithCurrencyEffect"
                    />
                  </div>
                </a>
              </li>
            }
          </ol>
          <div>
            @if (!top3) {
              <ngx-skeleton-loader
                animation="pulse"
                [theme]="{
                  height: '1.5rem',
                  width: '100%'
                }"
              />
            }
          </div>
        </mat-card-content>
      </mat-card>
    </div>
    <div class="col-md-6 mb-3">
      <mat-card appearance="outlined" class="h-100">
        <mat-card-header>
          <mat-card-title class="align-items-center d-flex" i18n
            >Bottom</mat-card-title
          >
        </mat-card-header>
        <mat-card-content>
          <ol class="mb-0 ml-1 pl-3">
            @for (holding of bottom3; track holding) {
              <li class="py-1">
                <a
                  class="d-flex"
                  [queryParams]="{
                    dataSource: holding.dataSource,
                    holdingDetailDialog: true,
                    symbol: holding.symbol
                  }"
                  [routerLink]="[]"
                >
                  <div class="flex-grow-1 mr-2">{{ holding.name }}</div>
                  <div class="d-flex justify-content-end">
                    <gf-value
                      class="justify-content-end"
                      position="end"
                      [colorizeSign]="true"
                      [isPercent]="true"
                      [locale]="user?.settings?.locale"
                      [value]="holding.netPerformancePercentWithCurrencyEffect"
                    />
                  </div>
                </a>
              </li>
            }
          </ol>
          <div>
            @if (!bottom3) {
              <ngx-skeleton-loader
                animation="pulse"
                [theme]="{
                  height: '1.5rem',
                  width: '100%'
                }"
              />
            }
          </div>
        </mat-card-content>
      </mat-card>
    </div>
  </div>

  <div class="mb-5 row">
    <div class="col-lg">
      <div class="align-items-center d-flex mb-4">
        <div
          class="align-items-center d-flex flex-grow-1 h5 mb-0 text-truncate"
        >
          <span i18n>Portfolio Evolution</span>
          @if (user?.subscription?.type === 'Basic') {
            <gf-premium-indicator class="ml-1" />
          }
        </div>
      </div>
      <div class="chart-container">
        <gf-investment-chart
          class="h-100"
          [benchmarkDataItems]="investments"
          [benchmarkDataLabel]="portfolioEvolutionDataLabel"
          [currency]="user?.settings?.baseCurrency"
          [historicalDataItems]="performanceDataItems"
          [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
          [isLoading]="isLoadingInvestmentChart"
          [locale]="user?.settings?.locale"
        />
      </div>
    </div>
  </div>

  <div class="mb-5 row">
    <div class="col-lg">
      <div class="align-items-center d-flex mb-4">
        <div
          class="align-items-center d-flex flex-grow-1 h5 mb-0 text-truncate"
        >
          <span i18n>Investment Timeline</span>
          @if (user?.subscription?.type === 'Basic') {
            <gf-premium-indicator class="ml-1" />
          }
        </div>
        <gf-toggle
          class="d-none d-lg-block"
          [defaultValue]="mode"
          [isLoading]="false"
          [options]="modeOptions"
          (valueChange)="onChangeGroupBy($event.value)"
        />
      </div>
      @if (streaks) {
        <div class="row">
          <div class="col-md-6 col-xs-12 my-2">
            <gf-value
              i18n
              size="large"
              [unit]="unitCurrentStreak"
              [value]="streaks?.currentStreak"
              >Current Streak</gf-value
            >
          </div>
          <div class="col-md-6 col-xs-12 my-2">
            <gf-value
              i18n
              size="large"
              [unit]="unitLongestStreak"
              [value]="streaks?.longestStreak"
              >Longest Streak</gf-value
            >
          </div>
        </div>
      }
      <div class="chart-container">
        <gf-investment-chart
          class="h-100"
          [benchmarkDataItems]="investmentsByGroup"
          [benchmarkDataLabel]="investmentTimelineDataLabel"
          [currency]="user?.settings?.baseCurrency"
          [groupBy]="mode"
          [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
          [isLoading]="isLoadingInvestmentTimelineChart"
          [locale]="user?.settings?.locale"
          [savingsRate]="savingsRate"
        />
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-lg">
      <div class="align-items-center d-flex mb-4">
        <div
          class="align-items-center d-flex flex-grow-1 h5 mb-0 text-truncate"
        >
          <span i18n>Dividend Timeline</span>
          @if (user?.subscription?.type === 'Basic') {
            <gf-premium-indicator class="ml-1" />
          }
        </div>
        <gf-toggle
          class="d-none d-lg-block"
          [defaultValue]="mode"
          [isLoading]="false"
          [options]="modeOptions"
          (valueChange)="onChangeGroupBy($event.value)"
        />
      </div>
      <div class="chart-container">
        <gf-investment-chart
          class="h-100"
          [benchmarkDataItems]="dividendsByGroup"
          [benchmarkDataLabel]="dividendTimelineDataLabel"
          [currency]="user?.settings?.baseCurrency"
          [groupBy]="mode"
          [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
          [isLoading]="isLoadingDividendTimelineChart"
          [locale]="user?.settings?.locale"
        />
      </div>
    </div>
  </div>
</div>
